<!--
 * @Descripttion: damage报损报溢新增
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-27 17:44:39
 -->
<template>
  <div class="app-container paddingT50">
    <affix>
      <div class="paddingLR20 clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <div class="clearfix">
            <div class="fl">
              <el-button type="primary" @click="btnSaveData">保存</el-button>
              <el-button type="default" @click="btnCancle">取消</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </affix>
    <el-card shadow="never" class="border-radius-none margin-t2">
      <el-form
        ref="form"
        :model="dataObj"
        :rules="rules"
        label-position="right"
        label-width="100px"
        size="mini"
      >
        <h3>基础信息</h3>
        <el-divider />
        <div class="paddingTb20 w400">
          <el-form-item :label="`用户名:`" prop="username">
            <el-input v-model="dataObj.username" />
          </el-form-item>
          <el-form-item :label="`员工姓名`">
            <el-input v-model="dataObj.realName" />
          </el-form-item>
          <el-form-item label="性别:">
            <el-radio v-model="dataObj.sex" label="1">男</el-radio>
            <el-radio v-model="dataObj.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="登录密码:" prop="password">
            <el-input v-model="dataObj.password" />
          </el-form-item>
          <el-form-item label="确认密码:" prop="passwordAgain">
            <el-input v-model="dataObj.passwordAgain" />
          </el-form-item>
          <el-form-item :label="`所属门店`" prop="shopId">
            <el-select
              v-model="dataObj.shopId"
              filterable
              placeholder="请选择"
              @change="onShopChange"
            >
              <el-option
                v-for="item in optionsData.shop"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <h3>权限管理</h3>
        <el-divider />
        <Permissions class="paddingTb20" />
        <h3>更多</h3>
        <el-divider />
        <div class="paddingTb20 w400">
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="dataObj.phone" />
          </el-form-item>
          <el-form-item label="邮箱:" prop="email">
            <el-input v-model="dataObj.email" />
          </el-form-item>
          <el-form-item label="地址:">
            <el-input v-model="dataObj.address" />
          </el-form-item>
          <el-form-item label="状态:">
            <el-switch
              v-model="dataObj.status"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { isEmail, isTelOrPhone, isPassword } from '@/utils/validate'
import { getOptions } from '@/api/store/shop.js'
import { getDataById, addData } from '@/api/shop/employee.js'
import Affix from '@/components/Affix'
import Permissions from './permissions'

export default {
  name: 'StoreSave',
  components: { Affix, Permissions },
  mixins: [oftenuse],
  props: {
    operation: {
      type: String,
      default: null,
      validator: (value) => {
        return ['add', 'update'].indexOf(value) !== -1
      }
    },
    data: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      dataObj: { status: '1' },
      optionsData: {
        shop: []
      },
      rules: {
        username: [
          { required: true, message: '请填写用户名！', trigger: 'blur' }
        ],
        phone: [
          { validator: isTelOrPhone, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: isPassword, trigger: 'blur' }
        ],
        passwordAgain: [
          { validator: (rule, value, callback) => {
            const password = this.dataObj.password
            if (value !== password) {
              return callback(new Error('确认密码与登录密码不一致!'))
            }
            callback()
          }, trigger: 'blur' }
        ],
        email: [
          { validator: isEmail, trigger: 'blur' }
        ],
        shopId: [
          { required: true, message: '请选择所属门店！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnSaveData() {
      const params = {
        sysEmployee: this.dataObj,
        roleList: []
      }
      this.valiData().then(_ => {
        this.setBtnLoading('save', true)
        this.saveData(params).then(_ => {
          this.setBtnLoading('save', false)
        })
      })
    },
    btnCancle() {},
    // api
    valiData() {
      return this.handleValid('form')
    },
    saveData(params) {
      return addData(params).then(res => {
        if (!res.data.flag) return this.$notify.error({ title: '新增失败！' })
        this.$notify.success({ title: '新增成功！' })
      }).catch(err => {
        this.$notify.error({ title: '新增异常！', message: err.message })
      })
    },
    getData() {
      const store = this.dataObj
      const shop = {
        id: store.shopId,
        name: store.shopName
      }
      return { store, shop }
    },
    getDataById(id) {
      getDataById(id).then(res => {
        if (res.data.flag) {
          this.dataObj = res.data.data
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    onShopChange(val) {
      const shopOptions = this.optionsData.shop
      const arr = shopOptions.filter(item => { return item.value === val }) || []
      const obj = arr.length > 0 ? arr[0] : {}
      const name = obj.label
      this.$set(this.dataObj, 'shopName', name)
    },
    initData() {
      this.initOptionsData()
      if (this.operation === 'update') this.initUpdateData()
    },
    initUpdateData() {
      const id = this.data.id
      this.getDataById(id)
    },
    initOptionsData() {
      getOptions().then(res => {
        if (res.data.flag) {
          const data = res.data.data
          this.$set(this.optionsData, 'shop', data)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal{
  margin: 5px 0;
}
</style>
